<template>
  <div
    :style="{
      boxSizing: 'border-box',
      width: '100%',
      padding: '20px',
    }"
  >
    <a-row :gutter="20" :style="{ marginBottom: '20px' }">
      <a-col :span="8">
        <a-popover title="当前CPU">
          <a-card title="CPU" :bordered="false" :style="{ width: '100%' }">
            <a-progress
              type="circle"
              :status="cpu_status"
              :percent="cpu_percent"
            />
          </a-card>
          <template #content>
            <a-collapse :default-active-key="['1']">
              <a-collapse-item header="CPU基础信息" key="1">
                {{ cpu_info }}
              </a-collapse-item>
              <a-collapse-item header="CPU占用率top5的进程信息" key="2">
                <a-table :columns="cpu_columns" :data="cpu_data" />
              </a-collapse-item>
            </a-collapse>
          </template>
        </a-popover>
      </a-col>
      <a-col :span="8">
        <a-popover title="当前内存信息">
          <a-card title="内存" :bordered="false" :style="{ width: '100%' }">
            <a-progress
              type="circle"
              :status="memory_status"
              :percent="memory_percent"
            />
          </a-card>
          <template #content>
            <a-collapse :default-active-key="['1']">
              <a-collapse-item header="内存占用率top5的进程信息" key="1">
                <a-table :columns="memory_columns" :data="memory_data" />
              </a-collapse-item>
            </a-collapse>
          </template>
        </a-popover>
      </a-col>
      <a-col :span="8">
        <a-card
          title="磁盘"
          :bordered="false"
          :style="{ width: '100%' }"
          hoverable
        >
          <a-progress
            type="circle"
            :status="net_up_status"
            :percent="net_up_percent"
          />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :span="16">
        <a-card title="软件" :bordered="false" :style="{ width: '100%' }">
          <a-row :gutter="20" :style="{ padding: '5px' }">
            <a-card hoverable :style="{ width: '20%'}">
              <template #cover>
                <div
                  :style="{
                    height: '10px',
                    overflow: 'hidden',
                  }"
                >
                </div>
              </template>
              <a-card-meta title="终端">
                <template #description>
                  好用的终端软件 <br />
                </template>
              </a-card-meta>
              <IconCaretRight @click="shell_run"></IconCaretRight>
            </a-card>
            <a-card hoverable :style="{ width: '20%' }">
              <template #cover>
                <div
                  :style="{
                    height: '10px',
                    overflow: 'hidden',
                  }"
                >
                </div>
              </template>
              <a-card-meta title="软件商店">
                <template #description>
                  丰富的插件商城 <br />
                </template>
              </a-card-meta>
              <IconCaretRight @click="shell_run"></IconCaretRight>
            </a-card>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="系统" :bordered="false" :style="{ width: '100%' }">
          <a-card :style="{ marginBottom: '20px' }" title="信息">
            <p>系统</p>
          </a-card>
          <a-card :style="{ marginBottom: '20px' }" title="操作">
            <a-button type="outline" @click="restar_system">重启</a-button>
            <a-button type="outline" @click="off_system">关机</a-button>
          </a-card>
        </a-card>
      </a-col>
    </a-row>
    <Shell ref="modalComponent"> </Shell>
  </div>
</template>

<script>
import { ref } from "vue";
import { onMounted } from "vue";
import axios from "axios";
import Shell from "../components/Shell.vue";
import { reactive } from "vue";
import { Modal, Button, Message } from "@arco-design/web-vue";
import { IconCaretRight } from "@arco-design/web-vue/es/icon";

export default {
  setup() {
    var cpu_percent = ref(0);
    var cpu_status = ref("normal");
    var memory_percent = ref(0);
    var memory_status = ref("normal");
    var net_up_percent = ref(0);
    var net_up_status = ref("normal");
    var net_down_percent = ref(0);
    var net_down_status = ref("normal");
    var cpu_info = ref("");


    const cpu_columns = ref([
      {
        title: "进程名",
        dataIndex: "name",
      },
      {
        title: "CPU占用率",
        dataIndex: "cpu",
      },
    ]);
    const cpu_data = ref([]);
        // 添加数据的方法
    const addData = (newData) => {
      cpu_data.value.push(newData);
    };

    const addMemoryData = (newData) => {
      memory_data.value.push(newData);
    };

    const memory_columns = ref([
      {
        title: "进程名",
        dataIndex: "name",
      },
      {
        title: "内存占用率",
        dataIndex: "memory",
      },
    ]);
    const memory_data = ref([]);

    //重启
    const re_confirmAction = () => {
      axios
        .get("/api/get/restart_system")
        .then((response) => {
          console.log(response.data);
          message.success("服务器已重启");
        })
        .catch((error) => {
          console.error(error);
          message.error("重启服务器失败");
        });
    };
    //关机
    const off_confirmAction = () => {
      axios
        .get("/api/get/off_system")
        .then((response) => {
          console.log(response.data);
          message.success("服务器已关机");
        })
        .catch((error) => {
          console.error(error);
          message.error("关机失败");
        });
    };
    //取消
    const cancelAction = () => {
      Message.success("取消成功");
    };

    function get_status() {
      axios
        .get("/api/get/runtime_state")
        .then((response) => {
          // 处理响应数据
          console.log(response.data);
          // 假设 response.data["top_processes"]["cpu"] 是一个数组
          let topProcessesCpu = response.data["top_processes"]["cpu"];
          cpu_data.value = [];
          topProcessesCpu.forEach(function (item) {
            addData({
              name: item[0],
              cpu: item[1],
            })
          });
          //console.log(data);

          const memory_top = response.data["top_processes"]["memory"];
          memory_data.value = [];
          memory_top.forEach(function (item) {
            addMemoryData({
              name: item[0],
              memory: item[1],
            })
          });

          cpu_info.value = response.data["cpu_info"];

          let info = response.data;
          if (info != false) {
            cpu_percent.value = (info["cpu_usage"] / 100).toFixed(2);
            if (cpu_percent.value > 80) {
              cpu_status.value = "exception";
            } else if (cpu_percent.value > 50) {
              cpu_status.value = "warning";
            } else {
              cpu_status.value = "normal";
            }

            memory_percent.value = (info["memory_usage"] / 100).toFixed(2);
            if (memory_percent.value > 80) {
              memory_status.value = "exception";
            } else if (memory_percent.value > 50) {
              memory_status.value = "warning";
            } else {
              memory_status.value = "normal";
            }
          }
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
          return false;
        });
    }

    onMounted(() => {
      get_status();
      setInterval(() => {
        get_status();
      }, 5000);
    });

    return {
      cpu_percent,
      cpu_status,
      memory_percent,
      memory_status,
      net_up_percent,
      net_up_status,
      net_down_percent,
      net_down_status,
      cpu_info,
      cpu_columns,
      cpu_data,
      cancelAction,
      re_confirmAction,
      off_confirmAction,
      memory_data,
      memory_columns,
      addMemoryData,
    };
  },
  components: {
    Shell,
    IconCaretRight,
  },
  methods: {
    shell_run() {
      this.$refs.modalComponent.open();
    },
    restar_system() {
      Modal.confirm({
        title: "确认以下操作",
        content: "是否重启服务器？",
        onOk: this.re_confirmAction,
        onCancel: this.cancelAction,
      });
    },
    off_system() {
      Modal.confirm({
        title: "确认以下操作",
        content: "是否关闭服务器？",
        onOk: this.off_confirmAction,
        onCancel: this.cancelAction,
      });
    },
  },
};
</script>

<style>
.arco-col {
  text-align: center;
}
</style>
